<template>
	<div class="line_box" ref="echartDom"></div>
</template>

<script setup lang="ts">
import { Bottom } from "@element-plus/icons-vue/dist/types";
import { inject, ref, shallowRef, onMounted, onUnmounted, watch,watchEffect,defineEmits,toRaw } from "vue";

// 接收参数
const props = defineProps({
housingSupplyStatsData: {
type: Object,
default: () => {},
},
});
// 数据定义
const echartDom = ref<null | HTMLDivElement>(null);
const myChart = shallowRef<null | any>(null);
const echarts = inject<any>("echarts");
const emit = defineEmits(['barPiemagnify'])
// 字体自适应方法
const pxToRem = (px: number) => {
const scale = document.documentElement.clientWidth / 1920;
return Math.round(px * Math.min(scale, 3));
};


const getEchart = () => {
if (echartDom.value) {
myChart.value = echarts.init(echartDom.value);
const option = {
  tooltip: {
    trigger: 'axis'
  },
  legend: {
				icon:'rect',
    left: 'center',
    data: [
      'A Software',
      'A Phone',
      'Another Phone',
      'Precipitation',
      'Evaporation'
    ],
				textStyle: {
							color: "#fff",
							fontSize: pxToRem(12),
							rich: {},
							padding: [0, 0, pxToRem(-3), 0],
					},
  },
  radar: [
    {
      indicator: [
        { text: 'Brand', max: 100 },
        { text: 'Content', max: 100 },
        { text: 'Usability', max: 100 },
        { text: 'Function', max: 100 }
      ],
      center: ['50%', '40%'],
      radius: 50
    },

  ],
  series: [
    {
      type: 'radar',
      tooltip: {
        trigger: 'item'
      },
      areaStyle: {},
      data: [
        {
          value: [60, 73, 85, 40],
          name: 'A Software'
        }
      ]
    },

   
  ]
};
myChart.value.setOption(option);
myChart.value.on("click", (params) => {
	emit('barPiemagnify',props.housingSupplyStatsData)
});
}
};
const updateChart = () => {
if (myChart.value) {
myChart.value.dispose(); // 销毁旧图表实例
}
getEchart();
};

watchEffect(() => {
updateChart();
});
onMounted(() => {
getEchart();
window.addEventListener("resize", () => {
if (myChart.value) {
	myChart.value.dispose(); // 销毁旧图表实例
}
getEchart(); // 创建新的图表实例
});
});

onUnmounted(() => {
window.removeEventListener("resize", () => {
if (myChart.value) {
	myChart.value.dispose(); // 在组件销毁时也需要销毁图表实例
}
});
});
</script>

<style scoped lang="less">
.line_box{
	width: 100%;
	height: 100%;
}
</style>
